"use client";
import {
  Box,
  Button,
  Flex,
  Grid,
  Input,
  InputGroup,
  InputRightAddon,
  InputRightElement,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Radio,
  RadioGroup,
  Slider,
  SliderFilledTrack,
  SliderThumb,
  SliderTrack,
  useDisclosure,
  useToast,
} from "@chakra-ui/react";
import { motion } from "framer-motion";
import { useCallback, useContext, useEffect, useRef, useState } from "react";
import { MainContext } from "@/src/providers/MainProvider";
import { MacroProfile, MacroAction } from "@/src/types/types";
import EditItem from "../base/EditItem";
import MacroActionList from "../base/MacroActionList";
import { addMacroActionList, evtToAction } from "@/src/libs/macro";

function Macro() {
  const [startRecord, setStartRecord] = useState(false);
  const [delayTime, setDelayTime] = useState(100);
  const [delayType, setDelayType] = useState("1");
  const [lastActionTime, setLastActionTime] = useState(0);
  const [selectAction, setSelectAction] = useState(-1);
  const toast = useToast();

  const {
    connectedKeyboard,
    localMacroName,
    macroProfiles,
    setMacroProfiles,
    selectMacroProfile,
    setSelectMacroProfile,
    isRecordingMacro,
    setIsRecordingMacro,
    t,
  } = useContext(MainContext);

  const [macroActionList, setMarcoActionList] = useState<MacroAction[]>([]);
  // 输入框输入
  const [jpzhInput, setJpzhInput] = useState<MacroAction | null>(null)
  // 配置弹窗的状态管理
  const { isOpen: isOpen, onOpen: onOpen, onClose: onClose } = useDisclosure();

  const finalRef = useRef(null)

  useEffect(() => {
    // 只有在selectMacroProfile有效且macroProfiles有数据时才更新
    if (selectMacroProfile >= 0 && 
        macroProfiles.length > 0 && 
        selectMacroProfile < macroProfiles.length) {
      setMarcoActionList(macroProfiles[selectMacroProfile].list);
    }
  }, [selectMacroProfile, macroProfiles]);

  useEffect(() => {
    const addAction = (event: KeyboardEvent | MouseEvent) => {
      event.preventDefault();
      
      // 检查宏动作数量限制
      if (macroActionList.length >= 110) {
        toast({
          title: t("588"),
          description: t("macro_action_limit_reached"), // "宏动作数量已达上限(110个)"
          status: "warning",
          duration: 3000,
          isClosable: true,
          position: "top",
          variant: "subtle",
          containerStyle: {
            backdropFilter: "blur(10px)",
          },
        });
        return;
      }

      if (event instanceof KeyboardEvent) {
        if (event.repeat) {
          return;
        }
        setMarcoActionList((actionList: MacroAction[]) => {
          const time = Math.floor(event.timeStamp);
          const delay =
            delayType == "0" ? 0 : delayType == "1" ? -1 : delayTime;
          setLastActionTime(time);
          return addMacroActionList(actionList, event, time, delay, lastActionTime);
        });
      } else {
        if (event.target instanceof HTMLButtonElement) {
          if (event.target?.classList?.contains("btn-record")) return;
        }
        // console.log('鼠标滚动',event)
        setMarcoActionList((actionList: MacroAction[]) => {
          const time = Math.floor(event.timeStamp);
          const delay =
            delayType == "0" ? 0 : delayType == "1" ? -1 : delayTime;
          setLastActionTime(time);
          return addMacroActionList(actionList, event, time, delay, lastActionTime);
        });
      }
    };
    window.oncontextmenu = (e) => {
      e.preventDefault();
    };
    if (startRecord) {
      window.document.addEventListener("keydown", addAction);
      window.document.addEventListener("keyup", addAction);
      //window.document.addEventListener("mousedown", addAction);
      //window.document.addEventListener("mouseup", addAction);
      //window.document.addEventListener('wheel', addAction);
    } else {
      window.document.removeEventListener("keydown", addAction);
      window.document.removeEventListener("keyup", addAction);
      //window.document.removeEventListener("mousedown", addAction);
      //window.document.removeEventListener("mouseup", addAction);
      //window.document.removeEventListener('wheel', addAction);
    }

    return () => {
      window.document.removeEventListener("keydown", addAction);
      window.document.removeEventListener("keyup", addAction);
      //window.document.removeEventListener("mousedown", addAction);
      //window.document.removeEventListener("mouseup", addAction);
      //window.document.removeEventListener('wheel', addAction);
    };
  }, [startRecord, lastActionTime, delayTime, delayType]);

  // 插入按键的时候获取按键
  const getKey = useCallback((event: KeyboardEvent | MouseEvent) => {
    event.preventDefault();
    if (event instanceof KeyboardEvent) {
      const action = evtToAction(event);
      console.log('action', action)
      setJpzhInput(action)
    }
  }, []);

  // 卸载鼠标事件
  useEffect(() => {
    return () => {
      window.document.removeEventListener("keydown", getKey);
    };
  }, [getKey]);

  // 插入按键事件
  const insertkey = (action: MacroAction | null) => {
    window.document.removeEventListener("keydown", getKey);
    if (startRecord) return;
    
    // 检查是否有选中的宏配置
    if (selectMacroProfile < 0 || macroProfiles.length === 0) {
      toast({
        title: t("550"),
        description: t("552"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }

    // 检查宏动作数量限制
    //if (macroActionList.length + 2 > 110) { // +2 是因为每次插入会添加按下和释放两个动作
    const totalActionCount = macroProfiles.reduce((sum, profile) => sum + (profile.list?.length || 0), 0) + macroActionList.length;
      if (totalActionCount >= 110) {
      toast({
        title: t("588"),
        description: t("macro_action_limit_reached"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }

    if (!action) {
      return;
    }

    const mas = macroActionList;
    const ls = [
      {
        name: action.name,
        code: action.code,
        type: 2,
        action: 1,
        delay: delayTime
      },
      {
        name: action.name,
        code: action.code,
        type: 2,
        action: 0,
        delay: delayTime
      }
    ];

    setMarcoActionList([...mas, ...ls]);
    onClose();
  };

  // 设置动作
  const setActionData = (actionList: MacroAction[]) => {
    setMarcoActionList(actionList)
    // 使用更新后的列表更新macroProfiles
    const newMacroData = macroProfiles.map((macro, index) => {
      return index == selectMacroProfile
        ? { ...macro, list: actionList }
        : macro;
    });
    setMacroProfiles(newMacroData);
    localStorage.setItem(localMacroName, JSON.stringify(newMacroData));
    if (connectedKeyboard) {
      connectedKeyboard.setMacro(newMacroData);
    }
  }

  // 插入鼠标的宏事件
  const insertMouseMacro = async (type: string, button: number) => {
    if (startRecord) return;
  
    
    // 检查宏动作数量限制
    const actionCount = type === 'wheel' ? 1 : 2; // 滚轮事件只添加一个动作，其他鼠标事件添加两个
    if (macroActionList.length + actionCount > 110) {
      toast({
        title: t("590"),
        description: t("588"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }
    
    const mouseButtons = [
      'MS-L-Button',    // 0: 左键
      'MS-M-Button',    // 2: 中键 (修改顺序)
      'MS-R-Button',    // 1: 右键 (修改顺序)
      'MS-Backward',    // 3: 后退
      'MS-Forward',     // 4: 前进
      'Wheel D-Scroll',    // 5: 滚轮下滚
      'Wheel U-Scroll',    // 6: 滚轮上滚
      'Wheel L-Scroll',    // 7: 滚轮左滚
      'Wheel R-Scroll'     // 8: 滚轮右滚
    ];
    const newMacroActionList = macroActionList
    let actionList = [
      {
        name: mouseButtons[button],
        code: button,
        type: 1,
        action: 1,
        delay:delayTime
      },
      {
        name: mouseButtons[button],
        code: button,
        type: 1,
        action: 0,
        delay:delayTime
      }
    ]
    if (type === 'wheel') {
      let action = 3
      switch (button) {
        case 5:
          action = 3;
          break;
        case 6:
          action = 4;
          break;
        case 7:
          action = 5;
          break;
        case 8:
          action = 6;
          break;
        default:
          action = 3;
      }
      actionList = [
        {
          name: mouseButtons[button],
          code: button,
          type: 1,
          action: action,
          delay:delayTime
        }
      ]
    }

    // 创建更新后的宏动作列表
    const updatedList = [...newMacroActionList, ...actionList];
    // 设置更新后的列表到状态
    setMarcoActionList(updatedList);
    // 使用更新后的列表更新macroProfiles
    const newMacroData = macroProfiles.map((macro, index) => {
      return index == selectMacroProfile
        ? { ...macro, list: updatedList }
        : macro;
    });
    
    setMacroProfiles(newMacroData);
    localStorage.setItem(localMacroName, JSON.stringify(newMacroData));
    if (connectedKeyboard) {
      await connectedKeyboard.setMacro(newMacroData);
    }
  }

  const addMacro = () => {
    // 录制期间禁止添加宏配置
    if (startRecord) {
      return;
    }

    // 检查宏配置数量限制
    if (macroProfiles.length >= 32) {
      toast({
        title: t("529"),
        description: t("552"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }

    // 生成默认名称
    const defaultName = t("530") + (macroProfiles.length + 1);
    const newProfile = { name: defaultName, type: "0", list: [] };
    const newProfiles = [...macroProfiles, newProfile];
    setMacroProfiles(newProfiles);
    setSelectMacroProfile(newProfiles.length - 1);
  };

  const changeProfileName = (index: number, name: string) => {
    // 录制期间禁止修改宏名称
    if (startRecord) {
      return;
    }

    // 确保名称不为空，如果为空则使用默认名称
    let validName = name.trim();
    if (!validName) {
      validName = t("530") + (index + 1);
      
      // 显示提示信息
      toast({
        title: t("550"),
        description: t("551"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
    }
    
    setMacroProfiles((macroProfiles: MacroProfile[]) => {
      return macroProfiles.map((profile, i) =>
        index == i ? { ...profile, name: validName } : profile
      );
    });
  };

  const deleteProfile = (index: number) => {
    // 录制期间禁止删除宏配置
    if (startRecord) {
      return;
    }

    const newMacroProfiles = [...macroProfiles];
    newMacroProfiles.splice(index, 1);
    setMacroProfiles(newMacroProfiles);
    setMarcoActionList([]);
    localStorage.setItem(localMacroName, JSON.stringify(newMacroProfiles));
  };
  const startRec = async () => {
    // 检查是否有选中的宏配置
    if (selectMacroProfile < 0 || macroProfiles.length === 0) {
      toast({
        title: t("550"),
        description: t("552"), // 假设这个是"请先创建宏配置"的翻译键
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }
    
    const totalActionCount = macroProfiles.reduce((sum, profile) => sum + (profile.list?.length || 0), 0);
    if (totalActionCount >= 110) {
      toast({
        title: t("588"),
        description: t("macro_action_limit_reached"),
        status: "warning",
        duration: 3000,
        isClosable: true,
        position: "top",
        variant: "subtle",
        containerStyle: {
          backdropFilter: "blur(10px)",
        },
      });
      return;
    }

    const newRecordState = !startRecord;
    setStartRecord(newRecordState);
    // 同步更新全局录制状态
    setIsRecordingMacro(newRecordState);
    
    // 如果停止录制，更新macroProfiles
    if (startRecord) { // 当前状态是录制中，停止后更新
      const newMacroData = macroProfiles.map((macro, index) => {
        return index == selectMacroProfile
          ? { ...macro, list: macroActionList }
          : macro;
      });
      setMacroProfiles(newMacroData);
      localStorage.setItem(localMacroName, JSON.stringify(newMacroData));
      if (connectedKeyboard) {
        await connectedKeyboard.setMacro(newMacroData);
      }
    } else {
      // 开始录制时，重置为0而不是当前时间戳，这样第一个动作会使用固定延迟
      setLastActionTime(new Date().getTime());
    }
  };

  useEffect(() => {
    if (macroProfiles.length > 0) {
      localStorage.setItem(localMacroName, JSON.stringify(macroProfiles));
    }
    console.log(macroProfiles)
  }, [macroProfiles]);

  useEffect(() => {
    const initMacro = async () => {
      const data = await localStorage.getItem(localMacroName);
      if (data) {
        try {
          const macroArr = JSON.parse(data);
          setMacroProfiles(macroArr);
          
          // 避免在此处更新selectMacroProfile
          if (macroArr.length > 0 && selectMacroProfile < 0) {
            // 仅在初始化时设置
            setTimeout(() => {
              setSelectMacroProfile(0);
            }, 0);
          }
        } catch (e) {
          console.error("Failed to parse macro data", e);
        }
      }
    };
    
    initMacro();
  }, []);

  const deleteActionList = () => {
    setMarcoActionList((actionList: MacroAction[]) => {
      return actionList.filter((m, i) => i !== selectAction);
    });
  };

  // 透明背景样式
  const transparentBgStyle = {
    background: 'rgba(255, 255, 255, 0.5)',
    backdropFilter: 'blur(20px)',
    WebkitBackdropFilter: 'blur(20px)',
    border: '1px solid rgba(255, 165, 0, 0.2)',
    borderRadius: '16px',
    boxShadow: '0 8px 32px rgba(255, 165, 0, 0.1)'
  };

  // 处理宏配置选择
  const handleMacroProfileSelect = (index: number) => {
    // 录制期间禁止切换宏配置
    if (startRecord) {
      return;
    }
    
    setSelectMacroProfile(index);
  };

  return (
    <>
      <style jsx global>{`
        @keyframes pulse {
          0% {
            transform: scale(1);
            opacity: 0.3;
          }
          50% {
            transform: scale(1.2);
            opacity: 0.5;
          }
          100% {
            transform: scale(1);
            opacity: 0.3;
          }
        }
        .pulse-bg {
          animation: pulse 2s infinite ease-in-out;
        }
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(0.9);
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
        .modal-fade-in {
          animation: fadeIn 0.3s ease-out forwards;
        }
        /* 防止点击时的闪烁 */
        .chakra-modal__content-container {
          transition: opacity 0.3s ease !important;
        }
        .chakra-modal__overlay {
          transition: opacity 0.3s ease !important;
        }
        /* 禁用默认的移除动画 */
        .chakra-modal--closing .chakra-modal__overlay,
        .chakra-modal--closing .chakra-modal__content-container {
          opacity: 0 !important;
          transition: opacity 0.3s ease !important;
        }
        /* 确保动画平滑 */
        .chakra-modal__content {
          will-change: transform, opacity;
          backface-visibility: hidden;
        }
      `}</style>
      <Flex
        w="100%"
        h="100%"
        justifyContent="center"
        alignItems="flex-start"
        pt={1}
      >
        <Flex
          w="1000px"
          h="600px"
          position="relative"
          gap="0.5rem"
          style={{
            background: 'rgba(255, 255, 255, 0.5)',
            backdropFilter: 'blur(20px)',
            WebkitBackdropFilter: 'blur(20px)',
            border: '1px solid rgba(255, 165, 0, 0.2)',
            borderRadius: '16px',
            boxShadow: '0 8px 32px rgba(255, 165, 0, 0.1)'
          }}
        >
          <motion.div
            style={{ opacity: 0, width: "280px" }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.1, timeConstant: "ease-out" }}
            className="h-full"
          >
            <Box className="h-full" w="280px" style={{
              ...transparentBgStyle,
              background: "rgba(255, 255, 255, 0.2)"
            }}>
              <Flex
                alignItems="center"
                w="100%"
                className="px-4 gap-1"
                style={transparentBgStyle}
              >
                <Box>
                  <svg
                    className="w-5"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="27537"
                    width="48"
                    height="48"
                  >
                    <path
                      d="M896 768v128h-85.333333v-128h-85.333334v-85.333333h256v85.333333h-85.333333zM213.333333 768v128H128v-128H42.666667v-85.333333h256v85.333333H213.333333z m256-512V128h85.333334v128h85.333333v85.333333H384V256h85.333333z m0 170.666667h85.333334v469.333333h-85.333334V426.666667z m-341.333333 170.666666V128h85.333333v469.333333H128z m682.666667 0V128h85.333333v469.333333h-85.333333z"
                      p-id="27538"
                      fill="#666666"
                    ></path>
                  </svg>
                </Box>
                <Box className="font-medium w-64">{t("500")}</Box>
              </Flex>
              <Box>
                <Box className="p-2 rounded">
                  <ul className="h-[475px] overflow-auto p-2" style={transparentBgStyle}>
                    {macroProfiles.map((macro, index) => (
                      <li
                        key={index}
                        data-selected={index == selectMacroProfile}
                        className={`p-2 rounded transition-all ${
                          index == selectMacroProfile 
                            ? "bg-orange-500 text-white" 
                            : "text-black hover:bg-orange-100"
                        } ${
                          startRecord ? "cursor-not-allowed opacity-60" : "hover:cursor-pointer"
                        }`}
                        onClick={() => handleMacroProfileSelect(index)}
                        style={{
                          pointerEvents: startRecord ? 'none' : 'auto'
                        }}
                      >
                        <Box 
                          style={{ 
                            pointerEvents: startRecord ? 'none' : 'auto',
                            opacity: startRecord ? 0.6 : 1,
                            width: '100%'
                          }}
                        >
                          <EditItem
                            name={macro.name}
                            onChange={(value: string) => {
                              changeProfileName(index, value);
                            }}
                            onDelete={() => deleteProfile(index)}
                          />
                        </Box>
                      </li>
                    ))}
                  </ul>
                  <Grid
                    templateColumns={"1fr 1fr 1fr"}
                    gap={"0.5rem"}
                    className="py-2"
                    justifyContent={"center"}
                  >
                    <Button
                      className="main-btn"
                      variant={"unstyled"}
                      onClick={() => addMacro()}
                      isDisabled={startRecord}
                      opacity={startRecord ? 0.6 : 1}
                      cursor={startRecord ? "not-allowed" : "pointer"}
                      _hover={{
                        bg: startRecord ? "transparent" : "rgba(255, 165, 0, 0.1)",
                        color: startRecord ? "inherit" : "rgb(255, 140, 0)"
                      }}
                      _disabled={{
                        cursor: "not-allowed",
                        opacity: 0.6,
                        _hover: { bg: "transparent" }
                      }}
                    >
                      {t("501")}
                    </Button>
                  </Grid>
                </Box>
              </Box>
            </Box>
          </motion.div>
          <motion.div
            style={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.2, timeConstant: "ease-out" }}
            className="h-full flex-1"
          >
            <Box
              as={motion.div}
              style={{ opacity: 0, scale: 1.05, height: "100%", ...transparentBgStyle }}
              animate={{ opacity: 1, scale: 1 }}
            >
              <Flex
                alignItems="center"
                w="100%"
                className="px-4 gap-1"
                style={transparentBgStyle}
              >
                <Box>
                  <svg
                    className="w-5"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="27537"
                    width="48"
                    height="48"
                  >
                    <path
                      d="M896 768v128h-85.333333v-128h-85.333334v-85.333333h256v85.333333h-85.333333zM213.333333 768v128H128v-128H42.666667v-85.333333h256v85.333333H213.333333z m256-512V128h85.333334v128h85.333333v85.333333H384V256h85.333333z m0 170.666667h85.333334v469.333333h-85.333334V426.666667z m-341.333333 170.666666V128h85.333333v469.333333H128z m682.666667 0V128h85.333333v469.333333h-85.333333z"
                      p-id="27538"
                      fill="#666666"
                    ></path>
                  </svg>
                </Box>
                <Box className="font-medium w-80">{t("510")}</Box>
              </Flex>
              <Box className="p-2 h-[550px] overflow-hidden">
                <MacroActionList
                  list={macroActionList}
                  onChange={setActionData}
                  startRecord={startRecord}
                />
              </Box>
            </Box>
          </motion.div>
          <motion.div
            style={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3, delay: 0.4, timeConstant: "ease-out" }}
            className="h-full"
          >
            <Box as={motion.div} className="h-full" w="16rem" style={transparentBgStyle}>
              <Box className="p-2">
                <Button
                  w="100%"
                  className="main-btn btn-record !text-white"
                  _focusVisible={{ boxShadow: "none" }}
                  onClick={() => startRec()}
                  isDisabled={selectMacroProfile < 0 || macroProfiles.length === 0}
                  opacity={selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1}
                  bg={startRecord ? "rgb(255, 140, 0)" : "rgba(255, 140, 0, 0.8)"}
                  _hover={{
                    bg: startRecord ? "rgba(255, 140, 0, 0.9)" : "rgba(255, 140, 0, 0.7)",
                    _disabled: {
                      bg: "rgba(255, 140, 0, 0.6)",
                      cursor: "not-allowed"
                    }
                  }}
                  _disabled={{
                    cursor: "not-allowed",
                    opacity: 0.6,
                    boxShadow: "none",
                    _hover: { bg: "rgba(255, 140, 0, 0.6)" }
                  }}
                >
                  {startRecord ? t("520") : t("521")}
                </Button>
              </Box>
              <Box className="px-2 pb-2 flex flex-col gap-2">
                <Box className="p-3" style={{
                  ...transparentBgStyle,
                  backgroundColor: "rgba(255, 255, 255, 0.2)",
                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
                }}>
                  <Box className="pb-3 font-medium">{t("511")}</Box>
                  <RadioGroup
                    defaultValue={delayType}
                    onChange={(value) => setDelayType(value)}
                    sx={{
                      '.chakra-radio__control': {
                        borderColor: 'rgba(255, 140, 0, 0.5)',
                        _checked: {
                          bg: 'rgb(255, 140, 0)',
                          borderColor: 'rgb(255, 140, 0)'
                        }
                      }
                    }}
                  >
                    <Flex flexDirection="column" rowGap="0.8rem">
                      <Radio value="0">{t("512")}</Radio>
                      <Radio value="1">{t("513")}</Radio>
                      <Flex alignItems="center" justifyContent="space-between">
                        <Radio value="2">{t("514")}</Radio>
                        <InputGroup w="5rem">
                          <Input
                            defaultValue={delayTime}
                            onChange={(event) => {
                              setDelayTime(parseInt(event?.target.value));
                            }}
                            w="auto"
                            h="2rem"
                            variant="unstyled"
                            className="!bg-orange-100 !rounded-none !pl-3"
                            _focus={{
                              borderColor: 'rgb(255, 140, 0)',
                              boxShadow: '0 0 0 1px rgba(255, 140, 0, 0.3)'
                            }}
                          />
                          <InputRightElement>
                            <Box className="h-8">ms</Box>
                          </InputRightElement>
                        </InputGroup>
                      </Flex>
                    </Flex>
                  </RadioGroup>
                </Box>

                {false &&  <Box className="p-3" style={{
                  ...transparentBgStyle,
                  backgroundColor: "rgba(255, 255, 255, 0.2)",
                  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)"
                }}>
                  <Box className="pb-3 font-medium">{t("539")}</Box>
                  <Box className='h-[300px] pl-4 pr-2 py-2 flex flex-col gap-2 overflow-hidden overflow-y-auto'
                    sx={{
                      '& >div': {
                        padding: '0.75rem',
                        borderRadius: '0.375rem',
                        backgroundColor: 'rgba(255, 255, 255, 0.95)',
                        fontWeight: 'medium',
                        fontSize: '0.9rem',
                        transition: 'all 0.2s ease',
                        border: '1px solid rgba(0, 0, 0, 0.1)',
                        boxShadow: '0 2px 5px rgba(0, 0, 0, 0.08)',
                        color: '#000000'
                      }
                    }}
                  >
                    <Box className='mouse-content-option'
                      onClick={() => insertMouseMacro('mouse', 0)}
                      sx={{
                        pointerEvents: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 'none' : 'auto',
                        opacity: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1,
                        cursor: startRecord ? 'not-allowed' : 'pointer',
                        '&:hover': {
                          bg: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.1)',
                          color: startRecord ? 'inherit' : 'rgb(255, 140, 0)',
                          borderColor: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.3)'
                        }
                      }}
                    >
                      {t("102")}
                    </Box>
                    <Box className='mouse-content-option'
                      onClick={() => insertMouseMacro('mouse', 2)}
                      sx={{
                        pointerEvents: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 'none' : 'auto',
                        opacity: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1,
                        cursor: startRecord ? 'not-allowed' : 'pointer',
                        '&:hover': {
                          bg: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.1)',
                          color: startRecord ? 'inherit' : 'rgb(255, 140, 0)',
                          borderColor: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.3)'
                        }
                      }}
                    >
                      {t("104")}
                    </Box>
                    <Box className='mouse-content-option'
                      onClick={() => insertMouseMacro('mouse', 1)}
                      sx={{
                        pointerEvents: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 'none' : 'auto',
                        opacity: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1,
                        cursor: startRecord ? 'not-allowed' : 'pointer',
                        '&:hover': {
                          bg: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.1)',
                          color: startRecord ? 'inherit' : 'rgb(255, 140, 0)',
                          borderColor: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.3)'
                        }
                      }}
                    >
                      {t("105")}
                    </Box>
                    <Box className='mouse-content-option'
                      onClick={() => insertMouseMacro('mouse', 3)}
                      sx={{
                        pointerEvents: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 'none' : 'auto',
                        opacity: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1,
                        cursor: startRecord ? 'not-allowed' : 'pointer',
                        '&:hover': {
                          bg: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.1)',
                          color: startRecord ? 'inherit' : 'rgb(255, 140, 0)',
                          borderColor: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.3)'
                        }
                      }}
                    >
                      {t("107")}
                    </Box>
                    <Box className='mouse-content-option'
                      onClick={() => insertMouseMacro('mouse', 4)}
                      sx={{
                        pointerEvents: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 'none' : 'auto',
                        opacity: startRecord || selectMacroProfile < 0 || macroProfiles.length === 0 ? 0.6 : 1,
                        cursor: startRecord ? 'not-allowed' : 'pointer',
                        '&:hover': {
                          bg: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.1)',
                          color: startRecord ? 'inherit' : 'rgb(255, 140, 0)',
                          borderColor: startRecord ? 'transparent' : 'rgba(255, 165, 0, 0.3)'
                        }
                      }}
                    >
                      {t("106")}
                    </Box>
                  </Box>
                </Box>}
              </Box>
            </Box>
          </motion.div>
        </Flex>
      </Flex>
    </>
  );
}

export default Macro;
